<template>
  <section class="my-coupon">
    <div class="inner">
      <ul class="tab">
        <li class="tab-item" :class="{active: i.id === selected}" v-for="i in tabList" :key="i.id" @click="selected = i.id">
          <span>
            {{i.name}}
            <span class="count">
              ({{i.count}})
            </span>
          </span>
        </li>
      </ul>
      <div class="tabs-content">
        <div class="page-container clearfix">
          <ul class="clearfix">
            <li>项目名称</li>
            <li>优惠价格</li>
            <li>使用状态</li>
            <li>有效期</li>
          </ul>
          <ul class="clearfix">
            <li>吸脂瘦脸优惠券</li>
            <li>
              <div>
                <span>￥<b>520</b></span>
                <p>满10000元可用 </p>
              </div>
            </li>
            <li>未使用</li>
            <li>3天</li>
          </ul>
          <ul class="clearfix">
            <li>吸脂瘦脸优惠券</li>
            <li>
              <div>
                <span>￥<b>520</b></span>
                <p>满10000元可用 </p>
              </div>
            </li>
            <li>未使用</li>
            <li>3天</li>
          </ul>
        </div>
      </div>
      <div style="text-align:center;margin-top: 20px">
        <Page :total="100" prev-text="上一页" next-text="下一页" />
      </div>

    </div>
  </section>
</template>

<script>
import MsgItem from '@/components/ListItem/MsgItem'
export default {
  name: 'PersonalMsg',
  components: {
      MsgItem
  },
   data () {
      return {
        selected: 0,
        tabList: [
            {id: 0, name: '全部优惠券',count: 10},
            {id: 1, name: '未使用', count: 10},
            {id: 2, name: '已使用', count: 10},
            {id: 3, name: '已过期', count: 10}
        ],
        list: [
        ]
      }
   },
    created () {
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .my-coupon {
    .tab {
      border: 1px solid @border-color;
      border-bottom: 0;
      background-color: #f5f5f5;
      &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
      }
      .tab-item {
        float: left;
        width: 25%;
        height: 43px;
        line-height: 43px;
        text-align: center;
        color: #666;
        background-color: #f5f5f5;
        border-right: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        position: relative;
        cursor: pointer;
        &:last-child {
          border-right-color: transparent;
        }
      }
      .tab-item.active {
        border-bottom-color: transparent;
        background-color: #fff;
        color: @theme-color;
        &:before {
          content: '';
          width: 100%;
          height: 3px;
          background-color: @theme-color-dark;
          position: absolute;
          top: -1px;
          left: 0;
        }
      }
    }
    .tabs-content {
      padding-top: 15px;
      border: solid 1px #e0e0e0;
      border-top: none;
      >.page-container {
        padding: 20px 0 0 0;
        text-align: center;
        margin: 0;
        >:first-child{
          padding: 0;
          border-bottom:none;
          li{
            float: left;
            width: 25%;
            text-align: center;
            font-size: 14px;
            color: #999999;

          }
        }
        >ul{
          width: 96%;
          margin: 0 auto;
          padding: 55px 0 35px 0;
          border-bottom: solid 1px #e0e0e0;
          >:nth-child(2){
            >div{
               margin-top: -25px;
            }
          }
          li{
            float: left;
            width: 25%;
            text-align: center;
            font-size: 16px;
            color: #333333;
            span{
              font-size: 16px;
              color: @theme-color-dark;
              b{
                font-size: 30px;
              }
            }
            p{
              font-size: 14px;
              color: #999999;
            }
          }
        }
        >:last-child{
          border: none;
        }
      }
    }
  }
</style>
